<%@ page import="java.time.LocalDateTime" %>
<%@ page import="java.time.format.DateTimeFormatter" %><%--
  Created by IntelliJ IDEA.
  User: fangt
  Date: 2024/11/19
  Time: 20:17
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="Css/product.css">
    <script src="js/vue-2.6.10.js"></script>
    <script src="js/axios.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 20px;
        }
        .header{
            position: relative;
            width: 100%;
            height: 170px;
            background-color: transparent;
            border: 1px solid black;
            background: rgba(255, 255, 255, 0.5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.8);
        }
        .logo{
            float: left;
            line-height: 100px;
            /*padding-left: 300px;*/
        }
        .logo img{
            width: 200px;
            height:150px;
            vertical-align: middle;
        }
        .logo h2{
            position: relative;
            bottom: 10px;
            line-height: 100px;
            color: black;
        }
        .nav{
            float: left;
            margin-left: 60px;
        }
        .nav ul{
            width: 100%;
            height: 100%;
        }
        .nav  ul li{
            text-align: center;
            float: left;
            list-style: none;
        }
        .nav ul li a{
            color: black;
            display: block;
            padding-top: 30px;
            padding-left: 30px;
            text-decoration: none;
        }
        .nav a:hover{
            text-decoration: underline;
            color: aquamarine;
        }
        .shuru{
            width: 300px;
            height: 42px;
            float: left;
            padding-top: 30px;
            padding-left: 100px;
        }
        .shuru input{
            width: 300px;
            height: 42px;
            border: 1px solid #00a4ff;
            border-right: 0;
            color: transparent;
            border: 1px solid #767171;
            background: rgba(255, 255, 255, 0.5);
            font-size: 14px;
            float: left;
        }
        .shuru a{
            position: absolute;
            /*margin-left: 250px;*/
            transform: translateX(250px);
            display: block;
            width: 50px;
            height: 42px;
            text-align: center;
            text-decoration: none;
            line-height: 42px;
            background-color: #767171;
            color: white;
        }
        .tx{
            width: 250px;
            height: 170px;
            position: absolute;
            top: 0;
            right:0;
            border: 1px solid black;
            /*margin-right: 20px;*/
            /*padding-top: 20px;*/
            /*padding-left: 30px;*/
        }
        .tx h3{
            margin-left: 37px;
            transform: translateY(-20px);

        }
        .xxx{
            transform: translateX(-150px);
            transform: translateY(-40px);
        }
        .xxx li{
            list-style: none;
        }
        .xxx li a{
            color: red;
        }
        .tuichu{
            padding-left: 20px;
        }
        .product-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .product-item {
            background-color: #fff;
            border: 1px solid #ddd;
            border-radius: 8px;
            margin: 10px;
            width: 300px; /* 自定义宽度 */
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            transition: transform 0.2s;
        }

        .product-item:hover {
            transform: scale(1.05); /* 鼠标悬停效果 */
        }

        .product-img img {
            width: 100%;
            height: auto;
            border-top-left-radius: 8px;
            border-top-right-radius: 8px;
        }

        .product-info {
            padding: 15px;
        }

        .product-info div {
            margin-bottom: 10px;
        }

        .product-info span {
            font-weight: bold;
        }

        .product-info del {
            color: red;
        }

        .product-info a {
            text-decoration: none;
            color: #337ab7;
            font-weight: bold;
        }

        .product-info a:hover {
            text-decoration: underline; /* 鼠标悬停时的效果 */
        }
        .footer{
            width: 100%;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .footer bottom{
            width: 50px;
            height: 30px;
            display: inline-block;
        }
    </style>
</head>
<body>
<div class="product-list" id="app">
    <div class="header">
        <div class="logo">
            <h2><img src="img/images/E-STORELogo.jpg" alt=""></h2>
        </div>
        <div class="nav">
            <ul>
                <li><a href="">首页</a></li>
                <li><a href="">商城新品</a></li>
                <li><a href="">特价商品</a></li>
                <li><a href="">购物车</a></li>
                <li><a href="">订单查看</a></li>
                <li><a href="">用户特权</a></li>
            </ul>
        </div>
        <div class="shuru">
            <input type="text" placeholder="搜索商品">
            <a href="">搜索</a>
        </div>
        <div class="tx">
            <%
                LocalDateTime now=LocalDateTime.now();
                DateTimeFormatter formatter = DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss");
                String formattedDateTime = now.format(formatter);
            %>
           <div class="grxx"><h3>个人信息</h3></div>
            <ul class="xxx">
                <%
                if (session.getAttribute("customerId")==null){
                %>
                <p>请登录</p>
                <%
                }else {
                %>
                <p>登录成功</p>
                <p><%=formattedDateTime%></p>
                <p>用户姓名：<%=session.getAttribute("username")%></p>
                <li><a href="登录.jsp">退出登录</a></li>
                <%
                }
                %>
                <%
                    if (session.getAttribute("customerId")==null){
                        %>
                <li><a href="登录.jsp">登录</a></li>
                <li><a href="注册.jsp">注册</a></li>

                <%
                    }
                %>
                <li><a href="gwc.jsp">购物车</a></li>
            </ul>
        </div>
        </div>
    <div class="product-item" v-for="product in product_list">
        <div class="product-img">
            <img :src="images(product.picture)" alt="">
        </div>
        <div class="product-info">
            <div>品名：<span>{{product.name}}</span></div>
            <div>原价：<del>{{product.market_price}}</del></div>
            <div>现价：<span>{{product.sell_price}}</span></div>
            <div>简介：<span>{{product.description}}</span></div>
            <div><a :href="product_info(product.id)">查看详细内容</a></div>
        </div>

    </div>
    <div class="footer">
            <button><span><<</span>上一页</button>
            <button>下一页<span>>></span></button>
    </div>
</div>
<script>
    let app=new Vue({
        el:'#app',
        data:{
            product_list:[{"name":"商品1"},{"name":"商品2"},{"name":"商品3"},{"name":"商品4"}],
        },
        created(){
            axios({
                url:'product_list.do',

            }).then(re=>{
                console.log(re)
                this.product_list=re.data
            })
            // axios.get("product_list.do").then(function (result){
            //     console.log(result)
            //     vue.product_list=result.data
            // });
        },
        methods:{
            images:function (img_name){
                return "img/images/productImages/"+img_name
            },
            product_info:function (id){
                return 'productInfo.do?id=' +id;
            }
        }
    })
</script>
</body>
</html>
